<template>
 


    <div class="sidebar">
        <ul> 
            
                <h4 style="text-align: center; height: 40px; font-size:20px;line-height:40px">图书分类</h4>
            
            <li  v-for="sort in list_fenlei" :key="sort.categoriesId">
                <p>{{sort.classname}}</p>
                <span>></span>
                <div class="sidebar-mask"><ul class="infinite-list"    style="overflow:auto">
                   <h4 style="text-align: center; height: 40px; font-size:20px;line-height:40px;color:#FFA500">{{sort.classifyName}}</h4>
                  <li  v-for="item in sort.CategoriesList " :key="item.categoriesId">
                    <router-link style=" color: #ffffff;"  :to="{ path: '/book_list', query: { sousuo:1, id:item.categoriesId,name:item.classname}}">
                    <p style="width=200px">{{item.classname}}</p>
                    </router-link>
                  </li>
                  </ul></div>
            </li>
           
        </ul>
    </div>








</template>

<script>
import axios from "axios";
   export default {
    data() {
      return {
        isCollapse: true,
        list_fenlei:[]
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        ;
        // good_fenlei();
      },
      handleClose(key, keyPath) {
        ;
      }, 
      good_fenlei(){
        axios.get("/fl-categories/getAllClassify",{
          // params:{
          //  categoriesId:4
          // }
        }).then((res)=>{
          ;
          
          this.list_fenlei=res.data.data;
          ;
        })
      },
      
    },
    created(){
     this.good_fenlei();
    }
   
  }
</script>

<style scoped>



/* * {
    margin: 0;
    padding: 0;
} */
.sidebar {
    /* 子绝父相 */
    left: 1px;
    position: relative;

    width: 300px;
    height: 300px;
    margin: 50px auto;
    color: #ffffff;
    z-index: 99999;
    
  
}
.sidebar ul {
    width: 200px;
    height: 340px;
    margin-top:-40px;
    background-color: rgba(0, 0, 0, .3);
    border-radius:10px;
    
}
.sidebar ul li {
    list-style: none;
    height: 20px;
    width: 200px;
    padding: 10px 0;
    transition: all .5s;
}
.sidebar ul li p {
    float: left;
    margin-left: 50px;
}
.sidebar ul li span {
    float: right;
    margin-right: 20px;
}
.sidebar ul li:hover {
    background-color: orange;
    padding-left:20px;
    cursor: pointer;
  
    
}
.sidebar ul li:hover .sidebar-mask {
    display: block;
      /* overflow: hidden; */
    
}
.sidebar-mask {
  
    display: none;
    position: absolute;
    top:40px;
    right: -100px;
    width: 200px;
    height: 300px;
    background-color: rgb(255, 255, 255);
    text-align: center;
 transition: all .5s;
}



 
</style>